import * as React from 'react';
import styles from './index.less';
import {
  Button,
  Input,
  Table,
  Form,
  Select,
  message,
  Breadcrumb,
  Modal,
  Spin,
} from 'antd';
import { connect } from 'umi';
import request from '@/http';
import Edit from '@/components/richEdit';

const { Option } = Select;
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};
const Index = (props) => {
  const [formObject] = Form.useForm();
  const [formObjectForEdit] = Form.useForm();

  const loadDataSource = (
    queryParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    props.dispatch({
      type: 'userManagerModel/queryUserList',
      payload: {
        queryParams,
        pageValue,
        pageSizeValue,
      },
    });
  };
  React.useEffect(() => {
    loadDataSource(null, props.pagination.current, props.pagination.pageSize);
  }, []);

  const pageOnChange = (page: any) => {
    loadDataSource(formObject.getFieldsValue(), page.current, page.pageSize);
  };

  const searchOnClick = async () => {
    loadDataSource(formObject.getFieldsValue(), 1, props.pagination.pageSize);
  };

  const initUserEditor = (isModalVisible, user) => {
    let id = null;
    if (user) {
      formObjectForEdit.setFieldsValue({
        userNo: user.userNo,
        userName: user.userName,
        description: user.description,
        sex: user.sex.code,
      });
      id = user.id;
    }
    props.dispatch({
      type: 'userManagerModel/initUserEditor',
      payload: {
        id,
        isModalVisible,
      },
    });
  };

  const modelOnCancel = () => {
    initUserEditor(false, null);
  };

  const modelOnOk = async () => {
    const data = await formObjectForEdit.validateFields();
    const result = await new Promise((resolve) => {
      props.dispatch({
        type: 'userManagerModel/doCreateOrUpdateUser',
        payload: {
          user: {
            ...data,
            id: props.userEditor.id,
          },
          resolve,
        },
      });
    });
    if (result) {
      loadDataSource(
        formObject.getFieldsValue(),
        props.pagination.current,
        props.pagination.pageSize,
      );
    }
  };

  const deleteOnClick = async (id) => {
    const result = await new Promise((resolve) => {
      props.dispatch({
        type: 'userManagerModel/doDeleteUser',
        payload: {
          id,
          resolve,
        },
      });
    });
    if (result) {
      loadDataSource(
        formObject.getFieldsValue(),
        props.pagination.current,
        props.pagination.pageSize,
      );
    }
  };
  const isLoading = props.loading.effects['userManagerModel/queryUserList'];
  return (
    <>
      <div className="pageNavigate">
        <Breadcrumb>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          <Breadcrumb.Item>列表管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="pageMain">
        <div className="pageContent">
          <div className={styles.searchForm}>
            <Form layout="inline" form={formObject}>
              <Form.Item label="用户编号" name="userNo">
                <Input placeholder="请输入用户编号..." />
              </Form.Item>
              <Form.Item label="用户名称" name="userName">
                <Input placeholder="请输入用户名称..." />
              </Form.Item>
              <Form.Item label="性别" name="sex" initialValue="">
                <Select>
                  <Option value="">请选择...</Option>
                  <Option value="MALE">男性</Option>
                  <Option value="FEMAL">女性</Option>
                </Select>
              </Form.Item>
              <Form.Item label="描述" name="description">
                <Input placeholder="请输入描述..." />
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={searchOnClick}>
                  查询
                </Button>
              </Form.Item>
            </Form>
          </div>
          <div className={styles.mainTable}>
            <Button
              style={{ marginBottom: '10px' }}
              type="primary"
              onClick={() => {
                initUserEditor(true, null);
              }}
            >
              新增
            </Button>
            <Spin spinning={isLoading}>
              <Table
                scroll={{ x: true }}
                columns={[
                  {
                    title: '序号',
                    dataIndex: 'id',
                    key: 'id',
                    width: 50,
                  },
                  {
                    title: '用户编号',
                    dataIndex: 'userNo',
                    key: 'userNo',
                    width: 400,
                  },
                  {
                    title: '用户名称',
                    dataIndex: 'userName',
                    key: 'userName',
                    width: 100,
                  },
                  {
                    title: '性别',
                    dataIndex: 'sex',
                    key: 'sex',
                    width: 100,
                    align: 'center',
                    render: (sex) => sex.message,
                  },
                  {
                    title: '描述',
                    dataIndex: 'description',
                    key: 'description',
                    width: 500,
                    render: (description: any) => (
                      <>
                        <div
                          dangerouslySetInnerHTML={{ __html: description }}
                        ></div>
                        <div>{description}</div>
                      </>
                    ),
                  },
                  {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                    width: 100,
                  },
                  {
                    title: '更新时间',
                    dataIndex: 'updateTime',
                    key: 'updateTime',
                    width: 100,
                  },
                  {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: 100,
                    render: (row: any) => (
                      <>
                        <Button
                          type="link"
                          onClick={() => {
                            initUserEditor(true, row);
                          }}
                        >
                          编辑
                        </Button>
                        <Button
                          type="link"
                          onClick={() => {
                            deleteOnClick(row.id);
                          }}
                        >
                          删除
                        </Button>
                      </>
                    ),
                  },
                ]}
                dataSource={props.dataSource}
                pagination={props.pagination}
                onChange={pageOnChange}
                tableLayout="fixed"
                bordered
              />
            </Spin>
          </div>
        </div>
      </div>
      <Modal
        width={1000}
        title={props.userEditor.id ? '编辑' : '新增'}
        visible={props.userEditor.isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
        maskClosable={false}
        destroyOnClose
        okText="确认"
        cancelText="取消"
      >
        <Form
          {...layout}
          name="editForm"
          form={formObjectForEdit}
          preserve={false}
        >
          <Form.Item
            label="用户编号"
            name="userNo"
            rules={[
              {
                required: true,
                whitespace: true,
                message: '用户编号不能为空!',
              },
              { max: 30, message: '最大长度不能超过30!' },
            ]}
            style={{ marginBottom: 24 }}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="用户名称"
            name="userName"
            rules={[
              {
                required: true,
                whitespace: true,
                message: '用户名称不能为空!',
              },
              { max: 30, message: '最大长度不能超过30!' },
            ]}
            style={{ marginBottom: 24 }}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="性别"
            name="sex"
            rules={[{ required: true, message: '性别不能为空!' }]}
            style={{ marginBottom: 24 }}
          >
            <Select>
              <Option value="">请选择</Option>
              <Option value="MALE">男性</Option>
              <Option value="FEMAL">女性</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="描述"
            name="description"
            rules={[
              { required: true, whitespace: true, message: '描述不能为空!' },
              { max: 2000, message: '最大长度不能超过2000!' },
            ]}
            style={{ marginBottom: 24 }}
          >
            <Edit />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default connect((state: any) => {
  return {
    ...state.userManagerModel,
    loading: state.loading,
  };
})(Index);
